;(function($){
	
	var s = {};
	var $viewport = null;
	
	$.clip = {
		defaults: {
			image: null
			,imageWidth: null
			,imageHeight: null
			,frameWidth: 50
			,frameHeight: 50
			,duration: null
			,position: [0,0]
		}
	};
	
	$.fn.extend({
		clip: function(o){
			$viewport = $(this);
			s = $.extend($.clip.defaults, s || {}, o);
			
			var top = typeof this.clip.arguments[0] == 'number' ? this.clip.arguments[0] : s.position[0];
			var left = typeof this.clip.arguments[1] == 'number' ? this.clip.arguments[1] : s.position[1];
			
			if(typeof o == 'object'){
				_init();
			}
			
			_setViewport(top,left);
			return this;
		}
	});
	
	function _init(el){
		var image = '';
		
		image+= 'background-color: transparent;';
		if($.browser.msie && $.browser.version < 7){
			image+= 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+s.image+'\', sizingMethod=\'scale\');';
		}else{
			image+= 'background-image: url('+s.image+');';
		}
		
		// it's a span because the containing element don't need to be a div 
		var $v = $('<span class="jquery-clip-element" style="'+image+'"></span>').css({
			position: 'absolute'
			,display: 'block'
			,width: s.imageWidth
			,height: s.imageHeight
		});
		
		$viewport.data('_settings',s);
		$viewport.html($v);
	};
	
	function _setViewport(top, left){
		var posX = left*s.frameWidth<=s.imageWidth-s.frameWidth?left*s.frameWidth:0;
		var posY = top*s.frameHeight<=s.imageHeight-s.frameHeight?top*s.frameHeight:0;
		
		$viewport.find('span.jquery-clip-element').css({
			clip: 'rect('+posY+'px, '+(posX+s.frameWidth)+'px, '+(posY+s.frameHeight)+'px, '+posX+'px)'
			,top: (-posY)+'px'
			,left: (-posX)+'px'
		});
	};
	
})(jQuery);